<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css" />
	</head>
	<style>
		html,
		body {
			background-color: #efeff4;
		}
		
		.mui-bar~.mui-content .mui-fullscreen {
			top: 44px;
			height: auto;
		}
		
		.mui-pull-top-tips {
			position: absolute;
			top: -20px;
			left: 50%;
			margin-left: -25px;
			width: 40px;
			height: 40px;
			border-radius: 100%;
			z-index: 1;
		}
		
		.mui-bar~.mui-pull-top-tips {
			top: 24px;
		}
		
		.mui-pull-top-wrapper {
			width: 42px;
			height: 42px;
			display: block;
			text-align: center;
			background-color: #efeff4;
			border: 1px solid #ddd;
			border-radius: 25px;
			background-clip: padding-box;
			box-shadow: 0 4px 10px #bbb;
			overflow: hidden;
		}
		
		.mui-pull-top-tips.mui-transitioning {
			-webkit-transition-duration: 200ms;
			transition-duration: 200ms;
		}
		
		.mui-pull-top-tips .mui-pull-loading {
			/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
			margin: 0;
		}
		
		.mui-pull-top-wrapper .mui-icon,
		.mui-pull-top-wrapper .mui-spinner {
			margin-top: 7px;
		}
		
		.mui-pull-top-wrapper .mui-icon.mui-reverse {
			/*-webkit-transform: rotate(180deg) translateZ(0);*/
		}
		
		.mui-pull-bottom-tips {
			text-align: center;
			background-color: #efeff4;
			font-size: 15px;
			line-height: 40px;
			color: #777;
		}
		
		.mui-pull-top-canvas {
			overflow: hidden;
			background-color: #fafafa;
			border-radius: 40px;
			box-shadow: 0 4px 10px #bbb;
			width: 40px;
			height: 40px;
			margin: 0 auto;
		}
		
		.mui-pull-top-canvas canvas {
			width: 40px;
		}
		
		.mui-slider-indicator.mui-segmented-control {
			background-color: #efeff4;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back  mui-icon-backmui-pull-left"></a>
			<h1 class="mui-title">订单信息</h1>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile" id="0">
							全部订单
						</a>
						<a class="mui-control-item" href="#item2mobile" id="1">
							已完成
						</a>
						<a class="mui-control-item" href="#item3mobile" id="2">
							未完成
						</a>
						<a class="mui-control-item" href="#item4mobile" id="3">
							未通过
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view all">
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view yijin">
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view wei">
								</ul>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view fail">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.pullToRefresh.js"></script>
	<script src="../../js/mui.pullToRefresh.material.js"></script>
	<script src="../../js/myjs/localVarchar.js"></script>
	<script src="../../js/ipjs/ip.js"></script>
	<script src="../../js/constatnt/var.js"></script>
	<script type="text/javascript">
		mui.init({
			gestureConfig: {
				tap: true, //默认为true
				doubletap: true, //默认为false
				longtap: true, //默认为false
				swipe: true, //默认为true
				drag: true, //默认为true
				hold: true, //默认为false，不监听
				release: true, //默认为false，不监听
				swipeBack: true //启用右滑关闭功能

			}
		});		
		(function($) {
			//阻尼系数
			var deceleration = mui.os.ios ? 0.003 : 0.0009;
			$('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration: deceleration
			});
			$.ready(function() {
				//监视滚动
				var seek = 0;
				document.querySelector('.mui-slider').addEventListener("slide", function(event) {
					if(event.detail.slideNumber === 0) {
						seek = 0;
					} else if(event.detail.slideNumber === 1) {
						seek = 1;
					} else if(event.detail.slideNumber === 2) {
						seek = 2;
					} else if(event.detail.slideNumber === 3) {
						seek = 3;
					}
					createChild(seek);
				});

				//监视点击
				mui(".mui-scroll").on('tap', '.mui-control-item', function() {
					seek = this.getAttribute("id");
					createChild(seek);
				});
					createChild(0);
				var phone = localStorage.getItem(LOCAL_USER_INFO);
				createChild(0);
				function createChild(seek) {
					document.querySelector('.all').innerHTML = "";
					document.querySelector('.yijin').innerHTML = "";
					document.querySelector('.wei').innerHTML = "";
					document.querySelector('.fail').innerHTML = "";
					mui.ajax(ip + '/order/seek/phone/' + phone + "/" + seek, {
						type: 'get',
						success: function(data) {
							//获取json数据显示
							if(data.status == OPERATION_SUCCESS) {
								var jsonData = JSON.parse(data.data);
								for(i = 0; i < jsonData.length; i++) {
									var order = jsonData[i];
									if(seek === 0){
										document.querySelector('.all').innerHTML += (
										"<li class='mui-table-view-cell' id='" + order.id + "'>" +
										"<a class='mui-navigate-right' href='#' >订单号:" +
										order.orderNo
										+
										"" + "</a>"); +"</li>";
									}else if(seek === 1){
										document.querySelector('.yijin').innerHTML += (
										"<li class='mui-table-view-cell' id='" + order.id + "'>" +
										"<a class='mui-navigate-right' href='#' >订单号:" +
										order.orderNo
										+
										"" + "</a>"); +"</li>";
									}else if(seek === 2){
										document.querySelector('.wei').innerHTML += (
										"<li class='mui-table-view-cell' id='" + order.id + "'>" +
										"<a class='mui-navigate-right' href='#' >订单号:" +
										order.orderNo
										+
										"" + "</a>"); +"</li>";
									}else if(seek === 3){
										document.querySelector('.fail').innerHTML += (
										"<li class='mui-table-view-cell' id='" + order.id + "'>" +
										"<a class='mui-navigate-right' href='#' >订单号:" +
										order.orderNo
										+
										"" + "</a>"); +"</li>";
									}
								}
							} else {
								alert(data.msg);
							}
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							mui.toast("系统异常！");
						}
					});
				}
			});
		})(mui);
		mui(".mui-table-view").on('tap', '.mui-table-view-cell', function(event) {
			var idValue = this.getAttribute("id");
			var webview = mui.openWindow({
				url: 'orderDetailed.html',
				id: 'orderDetailed',
				extras: {
					idValue: idValue
				}
			});
		});
	</script>

</html>